<template>
  <a-modal
    :bodyStyle="{height: modalHeight()}"
    :centered="true"
    :title="title"
    :visible="visible"
    :width="modalWidth()"
    @cancel="handleCancel"
    class="update-modal"
  >
    <template slot="footer">
      <a-button key="cancel" @click="handleCancel">
        取消
      </a-button>
    </template>
    <div :style="modalStyle()">
      <a-spin :spinning="confirmLoading">
        <a-row :gutter="24">
          <a-col :span="12">
            <div>
              <span style="font-weight: bold">任务名称:&nbsp;&nbsp;</span>
              <span>{{ entity.taskName }}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <span style="font-weight: bold">定时任务corn:&nbsp;&nbsp;</span>
              <span>{{ entity.jobCron }}</span>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 12px">
          <a-col :span="12">
            <div>
              <span style="font-weight: bold">执行器:&nbsp;&nbsp;</span>
              <span>{{ entity.executor }}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <span style="font-weight: bold">jvm启动参数:&nbsp;&nbsp;</span>
              <span>{{ entity.jvmStartParam }}</span>
            </div>
          </a-col>
        </a-row>
        <a-divider>数据库设置</a-divider>
        <a-row :gutter="24" style="margin-top: 12px">
          <a-col :span="12">
            <div>
              <span style="font-weight: bold">数据源:&nbsp;&nbsp;</span>
              <span>{{ entity.datasource }}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <span style="font-weight: bold">目标数据源:&nbsp;&nbsp;</span>
              <span>{{ entity.targetDatasource }}</span>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 12px">
          <a-col :span="12">
            <div>
              <span style="font-weight: bold">源表:&nbsp;&nbsp;</span>
              <span>{{ entity.tableName }}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <span style="font-weight: bold">目标表:&nbsp;&nbsp;</span>
              <span>{{ entity.targetTableName }}</span>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 12px">
          <a-col :span="12">
            <div>
              <span style="font-weight: bold">源表主键:&nbsp;&nbsp;</span>
              <span>{{ entity.keycol }}</span>
            </div>
          </a-col>
        </a-row>
        <a-divider>采集字段设置</a-divider>
        <a-table
          bordered
          :pagination="false"
          :rowKey="(record) => record.id"
          :columns="fields"
          :data-source="entity.catchColumns">
        </a-table>
        <a-divider>增量设置</a-divider>
        <a-row :gutter="24" style="margin-top: 12px">
          <a-col :span="12">
            <span style="font-weight: bold">增量类型:&nbsp;&nbsp;</span>
            <span>{{ entity.incrementType }}</span>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 12px" v-if="entity.incrementType==='时间增量'">
          <a-col :span="12">
            <div style="display: flex">
              <div>
                <span style="font-weight: bold">增量参数:&nbsp;&nbsp;</span>
              </div>
              <div style="flex-grow: 1;white-space:normal;word-break:break-all;word-wrap:break-word">
                <span>{{ item.incTimeColumn }}</span>
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <span style="font-weight: bold">增量开始时间:&nbsp;&nbsp;</span>
            <span style="font-weight: bold">{{ entity.incStartTime }}:&nbsp;&nbsp;</span>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 12px" v-if="entity.incrementType==='时间增量'">
          <a-col :span="12">
            <span style="font-weight: bold">增量日期格式:&nbsp;&nbsp;</span>
            <span style="font-weight: bold">{{ entity.incTimeFormatter }}:&nbsp;&nbsp;</span>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 12px" v-if="entity.incrementType==='主键增量'">
          <a-col :span="12">
            <div style="display: flex">
              <div>
                <span style="font-weight: bold">增量参数:&nbsp;&nbsp;</span>
              </div>
              <div style="flex-grow: 1;white-space:normal;word-break:break-all;word-wrap:break-word">
                <span>{{ entity.incIdColumn }}</span>
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <span style="font-weight: bold">增量开始ID:&nbsp;&nbsp;</span>
            <span style="font-weight: bold">{{ entity.incStartId }}:&nbsp;&nbsp;</span>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 12px" v-if="entity.querySql">
          <a-col :span="24">
            <div style="display: flex">
              <div>
                <span style="font-weight: bold">查询SQL:&nbsp;&nbsp;</span>
              </div>
              <div style="flex-grow: 1;white-space:normal;word-break:break-all;word-wrap:break-word">
                <span>{{ entity.querySql }}</span>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-divider>概念属性映射</a-divider>
        <a-row style="margin-top: 12px">
          <span style="font-weight: bold">概念:&nbsp;&nbsp;</span>
          <span>{{ entity.conceptName }}</span>
        </a-row>

        <a-table
          style="margin-top: 12px"
          bordered
          :rowKey="(record) => record.id"
          :pagination="false"
          :columns="conceptFields"
          :data-source="entity.conceptMappings">
        </a-table>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>

import { register } from '@/utils/drag_modal'
import { catchTaskDetail } from '@/api/modular/main/knowl/catchtask_config/catchTaskConfigManager'

export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      title: '',
      entity: {},
      conceptFields: [{
        title: '模板属性',
        dataIndex: 'propertyName',
        ellipsis: true
      },
        {
          title: '内容',
          dataIndex: 'columnName',
          ellipsis: true
        }, {
          title: '加工类型',
          dataIndex: 'handleType',
          ellipsis: true
        }, {
          title: '加工字典',
          dataIndex: 'handleDic',
          ellipsis: true
        }, {
          title: '加工模型',
          dataIndex: 'handleModel',
          ellipsis: true
        }],
      fields: [{
        title: '字段名称',
        dataIndex: 'columnChname',
        ellipsis: true
      }, {
        title: '数据库字段',
        dataIndex: 'columnName',
        ellipsis: true
      }, {
        title: '字段类型',
        dataIndex: 'columnType',
        ellipsis: true
      }]
    }
  },

  methods: {
    modalHeight() {
      return (document.body.clientHeight * 0.8) + 'px'
    },
    modalStyle() {
      return {
        'overflow-y': 'overlay',
        'overflow-x': 'hidden',
        'height': '100%',
        'max-height': '100%',
        'padding-right': '9px'
      }
    },
    modalWidth() {
      return document.body.clientWidth * 0.5
    },
    handleCancel() {
      register(false)
      this.entity = {}
      this.visible = false
    },
    loadData(item) {
      this.title = '任务详情'
      this.visible = true
      this.confirmLoading = true
      register(true)
      catchTaskDetail({
        'id': item.id
      })
        .then((res) => {
          if (res.code === 200) {
            this.entity = res.data
          } else {
            this.$message.error(res.message)
          }
        }).catch((e) => {
        console.log(e)
      })
        .finally(() => {
          this.confirmLoading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.color_gray {
  color: gray;
}

::-webkit-scrollbar {
  width: 0;
  background-color: rgba(240, 240, 240, 1);
}
</style>
